import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import styles from './index.module.scss'

export default defineComponent({
  props: ['id'],
  setup: (props) => {
    const store = useStore()
    const state = reactive({
      list: []
    })
    const index = async () => {
      const { code, data } = await store.dispatch('base/GetListBusinessLogByUser', {
        businessKey: props?.id
      })
      if (code === 200) {
        state.list = data || []
      }
    }

    onMounted(() => {
      if (props?.id) index()
    })
    return () => {
      return (
        <div class={styles['life-cycle']}>
          <ul class={styles['life-cycle-list']}>
            {state.list?.map((item: any) => (
              <li class={styles['life-cycle-list-item']}>
                <div class={styles['life-cycle-list-item-time']}>{item.opertionTime}</div>
                <div
                  class={styles['life-cycle-list-item-text']}
                  v-html={item.opertionContent}
                ></div>
                <div
                  class={styles['life-cycle-list-item-name']}
                  style={{ color: item.opertionUserColor, 'border-color': item.opertionUserColor }}
                >
                  {item.opertionUserName}
                </div>
                <div class={styles['life-cycle-list-item-bor']}></div>
              </li>
            ))}

            {/* <li class={styles['life-cycle-list-item']}>
              <div class={styles['life-cycle-list-item-time']}>2023-02-09 12:12:34</div>
              <div class={styles['life-cycle-list-item-text']}>
                更新数据。更新内容：【查勘批次：武汉-移动-202303；查勘结果：不匹配；现场全景：查看全景；查勘备注：不满足建设条件】
              </div>
              <div class={styles['life-cycle-list-item-name']}>测试</div>
              <div class={styles['life-cycle-list-item-bor']}></div>
            </li> */}
          </ul>
        </div>
      )
    }
  }
})
